<template>
  <div class="goodsClassdetails bg-hex-fff">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff px-28rpx pb-32rpx">
      <div class="z-999 flex items-center justify-between" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
        <uni-icons type="back" size="28" />
        <span class="flex-1 text-36rpx" style="text-align: center;">{{ title }}</span>
      </div>
      <div class="mt-32rpx flex items-center">
        <div class="relative w-full">
          <input
            v-model.trim="searchVal"
            class="h-68rpx rounded-50 bg-hex-f5f5f5 pl-100rpx"
            placeholder-class="text-hex-CBCBCBFF text-26rpx font-400"
            type="text"
            placeholder="养生膳食" @confirm="onKeyboardConfirm">
          <div class="absolute left-32rpx top-50% h-40rpx w-40rpx translate-y-(-50%)">
            <image :src="`${cdnUrl}/imgs/shop/goodsSearchicon.png${imgVersion}`" mode="scaleToFill"
                   class="h-44rpx w-44rpx" />
          </div>
        </div>
        <div class="flex-1 whitespace-nowrap pl-32rpx pr-20rpx text-28rpx text-hex-999" @click="goback">
          取消
        </div>
      </div>
    </div>
    <div class="box-border rounded-t-32rpx pt-32rpx">
      <div class="mx-32rpx">
        <s-waterfall v-if="goodsList.length>0" :datalist="goodsList" :column="2">
          <template #default="{ item }">
            <div class="mb-30rpx mr-28rpx rounded-32rpx bg-hex-fff pb-10rpx shadow" @click.stop="navTo(`/pages-shop/goodsdetails?productId=${item.productId}`)">
              <div class="bg-water box-border w-326rpx flex items-center justify-center rounded-xl bg-hex-fff p-40rpx">
                <image
                  class="will-change h-100% w-100% rounded-24rpx"
                  lazy-load
                  :src="item.productImage" mode="widthFix" />
              </div>
              <div class="p-15rpx">
                <div class="mb-10rpx flex items-center">
                  <div
                    v-if="item.newState===1"
                    class="w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                    上新
                  </div>
                  <div class="textHide2 text-24rpx font-500 text-hex-333">{{ item.productName??item.productIntro }}</div>
                </div>

                <div class="flex items-center justify-between">
                  <div>
                    <div class="flex items-end">
                      <div class="text-32rpx font-400 text-hex-ff4d4e">¥{{ item.productPrice }}</div>
                      <!-- <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥{{ item.cost }}</div> -->
                    </div>

                  </div>
                  <div class="textdecor text-24rpx font-500 text-hex-999">已售{{ item.saleNum??0 }}</div>
                </div>
              </div>
            </div>
          </template>
        </s-waterfall>
        <div v-else>
          <div class="flex flex-col items-center justify-center">
            <image
              :src="`${cdnUrl}/imgs/noOpen/noText.png${imgVersion}`"
              mode="scaleToFill"
              class="h-300rpx w-300rpx"
            />
            <div class="mb-64rpx text-28rpx text-hex-7C8699">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useShopSeach from '../composables/useShopSeach.ts'
import { useShopStore } from '@/stores/shop'

let shopStore: any = useShopStore()
const { addhistoryList } = useShopSeach()
let title = $ref('')
let searchVal = $ref('')
let shopClassId = $ref(0)
onLoad((options) => {
  if (options) {
    shopClassId = options.id
    title = options.title
    searchVal = options.q
  }
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  // #endif
})
let pageNo = $ref(1)
let goodsList = $ref([])
let totalPage = $ref(0)
let searchBarTop: any = $ref('24')
const getList = async () => {
  //进行搜索
  const { data, error, status } = await Fetch('/qqyapi/product/product/search/list', {
    method: 'post',
    headers: { AppType: 3 },
    data: {
      appType: 3,
      keyWord: searchVal,
      pageNo,
      pageSize: 10,
      storeId: shopStore.shopDefaultStoreId,
    },
  })
  if (status === 200 && data.code === 0) {
    totalPage = data.result.totalPage
    goodsList = [...goodsList, ...data.result.list] as any
  }
}
//获取商品数据 type不为搜索将请求分类模块的商品数据
const getShopList = async (id) => {
  const { status, data, error } = await Fetch('/qqyapi/product/product/categoryArea/queryCategoryLinkProduct', {
    method: 'get',
    data: { appType: 3, categoryId: id, pageNo, pageSize: 10, isLinkChildrenNodeQuery: true },
  })
  if (status !== 200 || data.code !== 0) {
    return
  }
  goodsList = [...goodsList, ...data.result.list] as any
  totalPage = data.result.totalPage
}
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
watch(() => title, async () => {
  //重置分页
  pageNo = 1
  if (title === '搜索') {
    getList()
  } else {
    getShopList(shopClassId)
  }
})
const onKeyboardConfirm = (e) => {
  if (e.detail.value.trim() === '') {
    return
  }
  navTo(`/pages-shop/shopoutcome?title=搜索&q=${searchVal}`)
  addhistoryList(searchVal)
}
const goodsDatails = (id) => {
  uni.navigateTo({
    url: `/pages-shop/goodsdetails?productId=${id}`,
  })
}


//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    if (title === '搜索') {
      getList()
    } else {
      getShopList(shopClassId)
    }
  }
}
onReachBottom(() => {
  getMoreData()
})
</script>

<style lang="scss">
.goodsClassdetails {
  .textHide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .textdecor {
    text-decoration: line-through;
  }
}
</style>
